<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2325164" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon cuifont">&#xe768;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe767;</span>
                <div class="name">tv</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe766;</span>
                <div class="name">person_mail</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe765;</span>
                <div class="name">sign_out</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe764;</span>
                <div class="name">sparkles</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe763;</span>
                <div class="name">apitool</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe762;</span>
                <div class="name">open_dataset</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe761;</span>
                <div class="name">table_settings</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75d;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75e;</span>
                <div class="name">textbox</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75f;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe760;</span>
                <div class="name">alert_urgent</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75c;</span>
                <div class="name">notification_off</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75b;</span>
                <div class="name">mail_send</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe75a;</span>
                <div class="name">clipboard_bullet_list</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe758;</span>
                <div class="name">data_bar_fill</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe759;</span>
                <div class="name">data_line_fill</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe756;</span>
                <div class="name">caret_right</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe757;</span>
                <div class="name">caret_down</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe755;</span>
                <div class="name">rename</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe753;</span>
                <div class="name">mail_all_off</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe754;</span>
                <div class="name">mail_all</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe752;</span>
                <div class="name">ticket_list_dimiss</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74f;</span>
                <div class="name">doc_pdf</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe750;</span>
                <div class="name">doc_excel</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe751;</span>
                <div class="name">doc_csv</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74e;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74d;</span>
                <div class="name">kpi</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74b;</span>
                <div class="name">benchamark</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74c;</span>
                <div class="name">kpi_setting</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe74a;</span>
                <div class="name">alert_filled</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe742;</span>
                <div class="name">lock_close</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe741;</span>
                <div class="name">lock_open</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe745;</span>
                <div class="name">people_add</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe746;</span>
                <div class="name">target</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe747;</span>
                <div class="name">person_arrow_left</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe748;</span>
                <div class="name">people_team_delete</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe749;</span>
                <div class="name">people_settings</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe743;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe744;</span>
                <div class="name">receipt_search</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6001;</span>
                <div class="name">color</div>
                <div class="code-name">&amp;#xe6001;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73f;</span>
                <div class="name">message_alt_check</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe740;</span>
                <div class="name">message_alt_x</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73e;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73d;</span>
                <div class="name">message_alt_error</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73c;</span>
                <div class="name">column_triple</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73b;</span>
                <div class="name">save_edit</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe734;</span>
                <div class="name">align_top</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe735;</span>
                <div class="name">align_bottom</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe736;</span>
                <div class="name">align_horizontal_center</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe737;</span>
                <div class="name">arrow_right</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe738;</span>
                <div class="name">align_left</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe739;</span>
                <div class="name">align_right</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe73a;</span>
                <div class="name">align_vertical_center</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72f;</span>
                <div class="name">cart_alt</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe730;</span>
                <div class="name">undo</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe731;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe732;</span>
                <div class="name">x</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe733;</span>
                <div class="name">user_plus</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72e;</span>
                <div class="name">home_add</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72d;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72c;</span>
                <div class="name">volume_full</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72b;</span>
                <div class="name">globe</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe72a;</span>
                <div class="name">fullscreen</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe729;</span>
                <div class="name">slideshow</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe727;</span>
                <div class="name">stop_circle</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe728;</span>
                <div class="name">play_circle</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe724;</span>
                <div class="name">window_close</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe725;</span>
                <div class="name">window</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe726;</span>
                <div class="name">windows</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe723;</span>
                <div class="name">window_open</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe722;</span>
                <div class="name">building</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe720;</span>
                <div class="name">heart_regular</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe721;</span>
                <div class="name">heart_solid</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe710;</span>
                <div class="name">arrow_upload</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71f;</span>
                <div class="name">chart</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71e;</span>
                <div class="name">arrow_clockwise</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71d;</span>
                <div class="name">copy_link</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71c;</span>
                <div class="name">logo_bots</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71b;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe719;</span>
                <div class="name">arrow_rotate_counterclockwise</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe71a;</span>
                <div class="name">color_fill</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe718;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe716;</span>
                <div class="name">chevron_expand_vertical</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe717;</span>
                <div class="name">chevron_collapse_vertical</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe714;</span>
                <div class="name">chevrons_down</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe715;</span>
                <div class="name">chevrons_up</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe713;</span>
                <div class="name">arrow_refresh_to</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe712;</span>
                <div class="name">briefcase</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe711;</span>
                <div class="name">notepad</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70f;</span>
                <div class="name">goal</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70e;</span>
                <div class="name">arrow_generate</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70d;</span>
                <div class="name">chevrons_right</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70c;</span>
                <div class="name">no</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70b;</span>
                <div class="name">yes</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe70a;</span>
                <div class="name">right_arrow_alt</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe707;</span>
                <div class="name">comment_warning</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe708;</span>
                <div class="name">comment_error</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe709;</span>
                <div class="name">comment_check</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe703;</span>
                <div class="name">beaker</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe704;</span>
                <div class="name">pause</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe705;</span>
                <div class="name">api</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe706;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe702;</span>
                <div class="name">dataset_add_layer</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6fe;</span>
                <div class="name">arrow_counterclockwise</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f7;</span>
                <div class="name">arrow_left</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f8;</span>
                <div class="name">power</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f9;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6fa;</span>
                <div class="name">error_circle</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6fb;</span>
                <div class="name">comment_add</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6fc;</span>
                <div class="name">erase</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6fd;</span>
                <div class="name">add_block</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ff;</span>
                <div class="name">help_circle</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe700;</span>
                <div class="name">add_branch_block</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe701;</span>
                <div class="name">push</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f6;</span>
                <div class="name">linked_bots</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f5;</span>
                <div class="name">linked_widgets</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f4;</span>
                <div class="name">filter_inspector</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f3;</span>
                <div class="name">copy1</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f2;</span>
                <div class="name">arrow_download</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f0;</span>
                <div class="name">arrow_descending</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6f1;</span>
                <div class="name">arrow_ascending</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ef;</span>
                <div class="name">raw_data</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ee;</span>
                <div class="name">parse_filter</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ed;</span>
                <div class="name">watch_list</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6eb;</span>
                <div class="name">checkbox_unchecked</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ec;</span>
                <div class="name">checkbox_checked_square</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ea;</span>
                <div class="name">arrow_sync</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e9;</span>
                <div class="name">add_square</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e8;</span>
                <div class="name">info_circle_fill</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e7;</span>
                <div class="name">condition _format</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e4;</span>
                <div class="name">chevron_lift</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e5;</span>
                <div class="name">chevron_up</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e6;</span>
                <div class="name">chevron_right</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e3;</span>
                <div class="name">chevron_down</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e1;</span>
                <div class="name">arrow_down</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e2;</span>
                <div class="name">table</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d8;</span>
                <div class="name">navigation</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d9;</span>
                <div class="name">data</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6da;</span>
                <div class="name">checkmark</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6db;</span>
                <div class="name">arrow_up</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6dc;</span>
                <div class="name">arrow_sort</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6dd;</span>
                <div class="name">arrow_fold</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6de;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6df;</span>
                <div class="name">dismiss</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6e0;</span>
                <div class="name">arrow_unfold</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d7;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d6;</span>
                <div class="name">book_formula_information</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d4;</span>
                <div class="name">approve</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d5;</span>
                <div class="name">adjust_time</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d2;</span>
                <div class="name">field_formula</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d3;</span>
                <div class="name">field_format</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d1;</span>
                <div class="name">schedule_unify</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c6;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c7;</span>
                <div class="name">checkmark_circle</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c8;</span>
                <div class="name">block</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c9;</span>
                <div class="name">alert</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ca;</span>
                <div class="name">comment_forum</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6cb;</span>
                <div class="name">large</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6cc;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6cd;</span>
                <div class="name">library</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ce;</span>
                <div class="name">person</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6cf;</span>
                <div class="name">city</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6d0;</span>
                <div class="name">small</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c3;</span>
                <div class="name">dashboard_zoom</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c4;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c5;</span>
                <div class="name">drag</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6bf;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c1;</span>
                <div class="name">suggestion</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6c2;</span>
                <div class="name">book_formula_logical</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6be;</span>
                <div class="name">datetime_type</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6bc;</span>
                <div class="name">slicer</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6bd;</span>
                <div class="name">design</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6bb;</span>
                <div class="name">data_manage</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b8;</span>
                <div class="name">dismiss_circle_o</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b9;</span>
                <div class="name">data_inspactor</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ba;</span>
                <div class="name">add_circle</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b6;</span>
                <div class="name">right_outer_join</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b5;</span>
                <div class="name">lift_outer_join</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b7;</span>
                <div class="name">inner_join</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b2;</span>
                <div class="name">mail_all_accounts</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b3;</span>
                <div class="name">insert_token</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6b4;</span>
                <div class="name">mail_add</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ac;</span>
                <div class="name">calculator</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6ad;</span>
                <div class="name">summrize_by</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6a9;</span>
                <div class="name">board</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6aa;</span>
                <div class="name">settings_dev</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6a3;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6a1;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe696;</span>
                <div class="name">date_type</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe69e;</span>
                <div class="name">user_type</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe69f;</span>
                <div class="name">amount_type</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe6a0;</span>
                <div class="name">link_type</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe69d;</span>
                <div class="name">arrow_curve_left</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe69c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe68e;</span>
                <div class="name">text_type</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe68f;</span>
                <div class="name">bool_type</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe695;</span>
                <div class="name">null_type</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe697;</span>
                <div class="name">number_type</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe692;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe690;</span>
                <div class="name">eye_show</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe691;</span>
                <div class="name">eye_hide</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe68a;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe68b;</span>
                <div class="name">cw</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe686;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe687;</span>
                <div class="name">dataset</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe688;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe689;</span>
                <div class="name">config</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon cuifont">&#xe684;</span>
                <div class="name">visualization</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'cuifont';
  src: url('iconfont.eot?t=1685084922099'); /* IE9 */
  src: url('iconfont.eot?t=1685084922099#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1685084922099') format('woff2'),
       url('iconfont.woff?t=1685084922099') format('woff'),
       url('iconfont.ttf?t=1685084922099') format('truetype'),
       url('iconfont.svg?t=1685084922099#cuifont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.cuifont {
  font-family: "cuifont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="cuifont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"cuifont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon cuifont icon_send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon_send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_tv"></span>
            <div class="name">
              tv
            </div>
            <div class="code-name">.icon_tv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_person_mail"></span>
            <div class="name">
              person_mail
            </div>
            <div class="code-name">.icon_person_mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_sign_out"></span>
            <div class="name">
              sign_out
            </div>
            <div class="code-name">.icon_sign_out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_sparkles"></span>
            <div class="name">
              sparkles
            </div>
            <div class="code-name">.icon_sparkles
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_apitool"></span>
            <div class="name">
              apitool
            </div>
            <div class="code-name">.icon_apitool
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_open_dataset"></span>
            <div class="name">
              open_dataset
            </div>
            <div class="code-name">.icon_open_dataset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_table_settings"></span>
            <div class="name">
              table_settings
            </div>
            <div class="code-name">.icon_table_settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.icon_text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_textbox"></span>
            <div class="name">
              textbox
            </div>
            <div class="code-name">.icon_textbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon_warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_alert_urgent"></span>
            <div class="name">
              alert_urgent
            </div>
            <div class="code-name">.icon_alert_urgent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_notification_off"></span>
            <div class="name">
              notification_off
            </div>
            <div class="code-name">.icon_notification_off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_mail_send"></span>
            <div class="name">
              mail_send
            </div>
            <div class="code-name">.icon_mail_send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_clipboard_bullet_list"></span>
            <div class="name">
              clipboard_bullet_list
            </div>
            <div class="code-name">.icon_clipboard_bullet_list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_data_bar_fill"></span>
            <div class="name">
              data_bar_fill
            </div>
            <div class="code-name">.icon_data_bar_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_data_line_fill"></span>
            <div class="name">
              data_line_fill
            </div>
            <div class="code-name">.icon_data_line_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_caret_right"></span>
            <div class="name">
              caret_right
            </div>
            <div class="code-name">.icon_caret_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_caret_down"></span>
            <div class="name">
              caret_down
            </div>
            <div class="code-name">.icon_caret_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_rename"></span>
            <div class="name">
              rename
            </div>
            <div class="code-name">.icon_rename
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_mail_all_off"></span>
            <div class="name">
              mail_all_off
            </div>
            <div class="code-name">.icon_mail_all_off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_mail_all"></span>
            <div class="name">
              mail_all
            </div>
            <div class="code-name">.icon_mail_all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_ticket_list_dimiss"></span>
            <div class="name">
              ticket_list_dimiss
            </div>
            <div class="code-name">.icon_ticket_list_dimiss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_doc_pdf"></span>
            <div class="name">
              doc_pdf
            </div>
            <div class="code-name">.icon_doc_pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_doc_excel"></span>
            <div class="name">
              doc_excel
            </div>
            <div class="code-name">.icon_doc_excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_doc_csv"></span>
            <div class="name">
              doc_csv
            </div>
            <div class="code-name">.icon_doc_csv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_a-DocumentPDF"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.icon_a-DocumentPDF
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_kpi"></span>
            <div class="name">
              kpi
            </div>
            <div class="code-name">.icon_kpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_benchamark"></span>
            <div class="name">
              benchamark
            </div>
            <div class="code-name">.icon_benchamark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_kpi_setting"></span>
            <div class="name">
              kpi_setting
            </div>
            <div class="code-name">.icon_kpi_setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_alert_filled"></span>
            <div class="name">
              alert_filled
            </div>
            <div class="code-name">.icon_alert_filled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_lock_close"></span>
            <div class="name">
              lock_close
            </div>
            <div class="code-name">.icon_lock_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_lock_open"></span>
            <div class="name">
              lock_open
            </div>
            <div class="code-name">.icon_lock_open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_people_add"></span>
            <div class="name">
              people_add
            </div>
            <div class="code-name">.icon_people_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_target"></span>
            <div class="name">
              target
            </div>
            <div class="code-name">.icon_target
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_person_arrow_left"></span>
            <div class="name">
              person_arrow_left
            </div>
            <div class="code-name">.icon_person_arrow_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_people_team_delete"></span>
            <div class="name">
              people_team_delete
            </div>
            <div class="code-name">.icon_people_team_delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_people_settings"></span>
            <div class="name">
              people_settings
            </div>
            <div class="code-name">.icon_people_settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon_delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_receipt_search"></span>
            <div class="name">
              receipt_search
            </div>
            <div class="code-name">.icon_receipt_search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_color"></span>
            <div class="name">
              color
            </div>
            <div class="code-name">.icon_color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_message_alt_check"></span>
            <div class="name">
              message_alt_check
            </div>
            <div class="code-name">.icon_message_alt_check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_message_alt_x"></span>
            <div class="name">
              message_alt_x
            </div>
            <div class="code-name">.icon_message_alt_x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.icon_key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_message-alt-error"></span>
            <div class="name">
              message_alt_error
            </div>
            <div class="code-name">.icon_message-alt-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_column_triple"></span>
            <div class="name">
              column_triple
            </div>
            <div class="code-name">.icon_column_triple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_save_edit"></span>
            <div class="name">
              save_edit
            </div>
            <div class="code-name">.icon_save_edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_top"></span>
            <div class="name">
              align_top
            </div>
            <div class="code-name">.icon_align_top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_bottom"></span>
            <div class="name">
              align_bottom
            </div>
            <div class="code-name">.icon_align_bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_horizontal_center"></span>
            <div class="name">
              align_horizontal_center
            </div>
            <div class="code-name">.icon_align_horizontal_center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_right"></span>
            <div class="name">
              arrow_right
            </div>
            <div class="code-name">.icon_arrow_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_left"></span>
            <div class="name">
              align_left
            </div>
            <div class="code-name">.icon_align_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_right"></span>
            <div class="name">
              align_right
            </div>
            <div class="code-name">.icon_align_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_align_vertical_center"></span>
            <div class="name">
              align_vertical_center
            </div>
            <div class="code-name">.icon_align_vertical_center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_cart_alt"></span>
            <div class="name">
              cart_alt
            </div>
            <div class="code-name">.icon_cart_alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_undo"></span>
            <div class="name">
              undo
            </div>
            <div class="code-name">.icon_undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon_download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_x"></span>
            <div class="name">
              x
            </div>
            <div class="code-name">.icon_x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_user_plus"></span>
            <div class="name">
              user_plus
            </div>
            <div class="code-name">.icon_user_plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_home_add"></span>
            <div class="name">
              home_add
            </div>
            <div class="code-name">.icon_home_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon_like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_volume_full"></span>
            <div class="name">
              volume_full
            </div>
            <div class="code-name">.icon_volume_full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_globe"></span>
            <div class="name">
              globe
            </div>
            <div class="code-name">.icon_globe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_fullscreen"></span>
            <div class="name">
              fullscreen
            </div>
            <div class="code-name">.icon_fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_slideshow"></span>
            <div class="name">
              slideshow
            </div>
            <div class="code-name">.icon_slideshow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_stop_circle"></span>
            <div class="name">
              stop_circle
            </div>
            <div class="code-name">.icon_stop_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_play_circle"></span>
            <div class="name">
              play_circle
            </div>
            <div class="code-name">.icon_play_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_window_close"></span>
            <div class="name">
              window_close
            </div>
            <div class="code-name">.icon_window_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_window"></span>
            <div class="name">
              window
            </div>
            <div class="code-name">.icon_window
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_windows"></span>
            <div class="name">
              windows
            </div>
            <div class="code-name">.icon_windows
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_window_open"></span>
            <div class="name">
              window_open
            </div>
            <div class="code-name">.icon_window_open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_building"></span>
            <div class="name">
              building
            </div>
            <div class="code-name">.icon_building
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_heart_regular"></span>
            <div class="name">
              heart_regular
            </div>
            <div class="code-name">.icon_heart_regular
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_heart_solid"></span>
            <div class="name">
              heart_solid
            </div>
            <div class="code-name">.icon_heart_solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_upload"></span>
            <div class="name">
              arrow_upload
            </div>
            <div class="code-name">.icon_arrow_upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chart"></span>
            <div class="name">
              chart
            </div>
            <div class="code-name">.icon_chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_clockwise"></span>
            <div class="name">
              arrow_clockwise
            </div>
            <div class="code-name">.icon_arrow_clockwise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_copy_link"></span>
            <div class="name">
              copy_link
            </div>
            <div class="code-name">.icon_copy_link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_logo_bots"></span>
            <div class="name">
              logo_bots
            </div>
            <div class="code-name">.icon_logo_bots
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.icon_settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_rotate_counterclockwise"></span>
            <div class="name">
              arrow_rotate_counterclockwise
            </div>
            <div class="code-name">.icon_arrow_rotate_counterclockwise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_color_fill"></span>
            <div class="name">
              color_fill
            </div>
            <div class="code-name">.icon_color_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon_link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_expand_vertical"></span>
            <div class="name">
              chevron_expand_vertical
            </div>
            <div class="code-name">.icon_chevron_expand_vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_collapse_vertical"></span>
            <div class="name">
              chevron_collapse_vertical
            </div>
            <div class="code-name">.icon_chevron_collapse_vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevrons_down"></span>
            <div class="name">
              chevrons_down
            </div>
            <div class="code-name">.icon_chevrons_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevrons_up"></span>
            <div class="name">
              chevrons_up
            </div>
            <div class="code-name">.icon_chevrons_up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_refresh_to"></span>
            <div class="name">
              arrow_refresh_to
            </div>
            <div class="code-name">.icon_arrow_refresh_to
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_briefcase"></span>
            <div class="name">
              briefcase
            </div>
            <div class="code-name">.icon_briefcase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_notepad"></span>
            <div class="name">
              notepad
            </div>
            <div class="code-name">.icon_notepad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_goal"></span>
            <div class="name">
              goal
            </div>
            <div class="code-name">.icon_goal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_generate"></span>
            <div class="name">
              arrow_generate
            </div>
            <div class="code-name">.icon_arrow_generate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevrons_right"></span>
            <div class="name">
              chevrons_right
            </div>
            <div class="code-name">.icon_chevrons_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_no"></span>
            <div class="name">
              no
            </div>
            <div class="code-name">.icon_no
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_yes"></span>
            <div class="name">
              yes
            </div>
            <div class="code-name">.icon_yes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_right_arrow_alt"></span>
            <div class="name">
              right_arrow_alt
            </div>
            <div class="code-name">.icon_right_arrow_alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_comment_warning"></span>
            <div class="name">
              comment_warning
            </div>
            <div class="code-name">.icon_comment_warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_comment_error"></span>
            <div class="name">
              comment_error
            </div>
            <div class="code-name">.icon_comment_error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_comment_check"></span>
            <div class="name">
              comment_check
            </div>
            <div class="code-name">.icon_comment_check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_beaker"></span>
            <div class="name">
              beaker
            </div>
            <div class="code-name">.icon_beaker
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_pause"></span>
            <div class="name">
              pause
            </div>
            <div class="code-name">.icon_pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_api"></span>
            <div class="name">
              api
            </div>
            <div class="code-name">.icon_api
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon_play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_dataset_add_layer"></span>
            <div class="name">
              dataset_add_layer
            </div>
            <div class="code-name">.icon_dataset_add_layer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_counterclockwise"></span>
            <div class="name">
              arrow_counterclockwise
            </div>
            <div class="code-name">.icon_arrow_counterclockwise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_left"></span>
            <div class="name">
              arrow_left
            </div>
            <div class="code-name">.icon_arrow_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_power"></span>
            <div class="name">
              power
            </div>
            <div class="code-name">.icon_power
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.icon_save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_error_circle"></span>
            <div class="name">
              error_circle
            </div>
            <div class="code-name">.icon_error_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_comment_add"></span>
            <div class="name">
              comment_add
            </div>
            <div class="code-name">.icon_comment_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_erase"></span>
            <div class="name">
              erase
            </div>
            <div class="code-name">.icon_erase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_add_block"></span>
            <div class="name">
              add_block
            </div>
            <div class="code-name">.icon_add_block
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_help_circle"></span>
            <div class="name">
              help_circle
            </div>
            <div class="code-name">.icon_help_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_add_branch_block"></span>
            <div class="name">
              add_branch_block
            </div>
            <div class="code-name">.icon_add_branch_block
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_push"></span>
            <div class="name">
              push
            </div>
            <div class="code-name">.icon_push
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_linked_bots"></span>
            <div class="name">
              linked_bots
            </div>
            <div class="code-name">.icon_linked_bots
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_linked_widgets"></span>
            <div class="name">
              linked_widgets
            </div>
            <div class="code-name">.icon_linked_widgets
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_filter_inspector"></span>
            <div class="name">
              filter_inspector
            </div>
            <div class="code-name">.icon_filter_inspector
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_copy1"></span>
            <div class="name">
              copy1
            </div>
            <div class="code-name">.icon_copy1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_download"></span>
            <div class="name">
              arrow_download
            </div>
            <div class="code-name">.icon_arrow_download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_descending"></span>
            <div class="name">
              arrow_descending
            </div>
            <div class="code-name">.icon_arrow_descending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_ascending"></span>
            <div class="name">
              arrow_ascending
            </div>
            <div class="code-name">.icon_arrow_ascending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_raw_data"></span>
            <div class="name">
              raw_data
            </div>
            <div class="code-name">.icon_raw_data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_parse_filter"></span>
            <div class="name">
              parse_filter
            </div>
            <div class="code-name">.icon_parse_filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_watch_list"></span>
            <div class="name">
              watch_list
            </div>
            <div class="code-name">.icon_watch_list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_checkbox_unchecked"></span>
            <div class="name">
              checkbox_unchecked
            </div>
            <div class="code-name">.icon_checkbox_unchecked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_checkbox_checked_square"></span>
            <div class="name">
              checkbox_checked_square
            </div>
            <div class="code-name">.icon_checkbox_checked_square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_sync"></span>
            <div class="name">
              arrow_sync
            </div>
            <div class="code-name">.icon_arrow_sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_add_square"></span>
            <div class="name">
              add_square
            </div>
            <div class="code-name">.icon_add_square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_info_circle_fill"></span>
            <div class="name">
              info_circle_fill
            </div>
            <div class="code-name">.icon_info_circle_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_condition_format"></span>
            <div class="name">
              condition _format
            </div>
            <div class="code-name">.icon_condition_format
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_lift"></span>
            <div class="name">
              chevron_lift
            </div>
            <div class="code-name">.icon_chevron_lift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_up"></span>
            <div class="name">
              chevron_up
            </div>
            <div class="code-name">.icon_chevron_up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_right"></span>
            <div class="name">
              chevron_right
            </div>
            <div class="code-name">.icon_chevron_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_chevron_down"></span>
            <div class="name">
              chevron_down
            </div>
            <div class="code-name">.icon_chevron_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_down"></span>
            <div class="name">
              arrow_down
            </div>
            <div class="code-name">.icon_arrow_down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_table"></span>
            <div class="name">
              table
            </div>
            <div class="code-name">.icon_table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_navigation"></span>
            <div class="name">
              navigation
            </div>
            <div class="code-name">.icon_navigation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_data"></span>
            <div class="name">
              data
            </div>
            <div class="code-name">.icon_data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_checkmark"></span>
            <div class="name">
              checkmark
            </div>
            <div class="code-name">.icon_checkmark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_up"></span>
            <div class="name">
              arrow_up
            </div>
            <div class="code-name">.icon_arrow_up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_sort"></span>
            <div class="name">
              arrow_sort
            </div>
            <div class="code-name">.icon_arrow_sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_fold"></span>
            <div class="name">
              arrow_fold
            </div>
            <div class="code-name">.icon_arrow_fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon_list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_dismiss"></span>
            <div class="name">
              dismiss
            </div>
            <div class="code-name">.icon_dismiss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_unfold"></span>
            <div class="name">
              arrow_unfold
            </div>
            <div class="code-name">.icon_arrow_unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon_share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_book_formula_information"></span>
            <div class="name">
              book_formula_information
            </div>
            <div class="code-name">.icon_book_formula_information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_approve"></span>
            <div class="name">
              approve
            </div>
            <div class="code-name">.icon_approve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_adjust_time"></span>
            <div class="name">
              adjust_time
            </div>
            <div class="code-name">.icon_adjust_time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_field_formula"></span>
            <div class="name">
              field_formula
            </div>
            <div class="code-name">.icon_field_formula
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_field_format"></span>
            <div class="name">
              field_format
            </div>
            <div class="code-name">.icon_field_format
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_schedule_unify"></span>
            <div class="name">
              schedule_unify
            </div>
            <div class="code-name">.icon_schedule_unify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.icon_flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_checkmark_circle"></span>
            <div class="name">
              checkmark_circle
            </div>
            <div class="code-name">.icon_checkmark_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_block"></span>
            <div class="name">
              block
            </div>
            <div class="code-name">.icon_block
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_alert"></span>
            <div class="name">
              alert
            </div>
            <div class="code-name">.icon_alert
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_comment_forum"></span>
            <div class="name">
              comment_forum
            </div>
            <div class="code-name">.icon_comment_forum
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_large"></span>
            <div class="name">
              large
            </div>
            <div class="code-name">.icon_large
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.icon_people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_library"></span>
            <div class="name">
              library
            </div>
            <div class="code-name">.icon_library
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_person"></span>
            <div class="name">
              person
            </div>
            <div class="code-name">.icon_person
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_city"></span>
            <div class="name">
              city
            </div>
            <div class="code-name">.icon_city
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_small"></span>
            <div class="name">
              small
            </div>
            <div class="code-name">.icon_small
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_dashboard_zoom"></span>
            <div class="name">
              dashboard_zoom
            </div>
            <div class="code-name">.icon_dashboard_zoom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon_clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">.icon_drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon_more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_suggestion"></span>
            <div class="name">
              suggestion
            </div>
            <div class="code-name">.icon_suggestion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_book_formula_logical"></span>
            <div class="name">
              book_formula_logical
            </div>
            <div class="code-name">.icon_book_formula_logical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_datetime_type"></span>
            <div class="name">
              datetime_type
            </div>
            <div class="code-name">.icon_datetime_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_slicer"></span>
            <div class="name">
              slicer
            </div>
            <div class="code-name">.icon_slicer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_design"></span>
            <div class="name">
              design
            </div>
            <div class="code-name">.icon_design
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_data_manage"></span>
            <div class="name">
              data_manage
            </div>
            <div class="code-name">.icon_data_manage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_dismiss_circle_o"></span>
            <div class="name">
              dismiss_circle_o
            </div>
            <div class="code-name">.icon_dismiss_circle_o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_data_inspactor"></span>
            <div class="name">
              data_inspactor
            </div>
            <div class="code-name">.icon_data_inspactor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_add_circle"></span>
            <div class="name">
              add_circle
            </div>
            <div class="code-name">.icon_add_circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_right_outer_join"></span>
            <div class="name">
              right_outer_join
            </div>
            <div class="code-name">.icon_right_outer_join
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_lift_outer_join"></span>
            <div class="name">
              lift_outer_join
            </div>
            <div class="code-name">.icon_lift_outer_join
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_inner_join"></span>
            <div class="name">
              inner_join
            </div>
            <div class="code-name">.icon_inner_join
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_mail_all_accounts"></span>
            <div class="name">
              mail_all_accounts
            </div>
            <div class="code-name">.icon_mail_all_accounts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_insert_token"></span>
            <div class="name">
              insert_token
            </div>
            <div class="code-name">.icon_insert_token
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_mail_add"></span>
            <div class="name">
              mail_add
            </div>
            <div class="code-name">.icon_mail_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_calculator"></span>
            <div class="name">
              calculator
            </div>
            <div class="code-name">.icon_calculator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_summrize_by"></span>
            <div class="name">
              summrize_by
            </div>
            <div class="code-name">.icon_summrize_by
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_board"></span>
            <div class="name">
              board
            </div>
            <div class="code-name">.icon_board
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_settings_dev"></span>
            <div class="name">
              settings_dev
            </div>
            <div class="code-name">.icon_settings_dev
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon_edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon_add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_date_type"></span>
            <div class="name">
              date_type
            </div>
            <div class="code-name">.icon_date_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_user_type"></span>
            <div class="name">
              user_type
            </div>
            <div class="code-name">.icon_user_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_amount_type"></span>
            <div class="name">
              amount_type
            </div>
            <div class="code-name">.icon_amount_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_link_type"></span>
            <div class="name">
              link_type
            </div>
            <div class="code-name">.icon_link_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_arrow_curve_left"></span>
            <div class="name">
              arrow_curve_left
            </div>
            <div class="code-name">.icon_arrow_curve_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon_search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_text_type"></span>
            <div class="name">
              text_type
            </div>
            <div class="code-name">.icon_text_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_bool_type"></span>
            <div class="name">
              bool_type
            </div>
            <div class="code-name">.icon_bool_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_null_type"></span>
            <div class="name">
              null_type
            </div>
            <div class="code-name">.icon_null_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_number_type"></span>
            <div class="name">
              number_type
            </div>
            <div class="code-name">.icon_number_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.icon_filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_eye_show"></span>
            <div class="name">
              eye_show
            </div>
            <div class="code-name">.icon_eye_show
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_eye_hide"></span>
            <div class="name">
              eye_hide
            </div>
            <div class="code-name">.icon_eye_hide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon_copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_cw"></span>
            <div class="name">
              cw
            </div>
            <div class="code-name">.icon_cw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.icon_history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_dataset"></span>
            <div class="name">
              dataset
            </div>
            <div class="code-name">.icon_dataset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon_info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_config"></span>
            <div class="name">
              config
            </div>
            <div class="code-name">.icon_config
            </div>
          </li>
          
          <li class="dib">
            <span class="icon cuifont icon_visualization"></span>
            <div class="name">
              visualization
            </div>
            <div class="code-name">.icon_visualization
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="cuifont icon_xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            cuifont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon_send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_tv"></use>
                </svg>
                <div class="name">tv</div>
                <div class="code-name">#icon_tv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_person_mail"></use>
                </svg>
                <div class="name">person_mail</div>
                <div class="code-name">#icon_person_mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_sign_out"></use>
                </svg>
                <div class="name">sign_out</div>
                <div class="code-name">#icon_sign_out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_sparkles"></use>
                </svg>
                <div class="name">sparkles</div>
                <div class="code-name">#icon_sparkles</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_apitool"></use>
                </svg>
                <div class="name">apitool</div>
                <div class="code-name">#icon_apitool</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_open_dataset"></use>
                </svg>
                <div class="name">open_dataset</div>
                <div class="code-name">#icon_open_dataset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_table_settings"></use>
                </svg>
                <div class="name">table_settings</div>
                <div class="code-name">#icon_table_settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#icon_text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_textbox"></use>
                </svg>
                <div class="name">textbox</div>
                <div class="code-name">#icon_textbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon_warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_alert_urgent"></use>
                </svg>
                <div class="name">alert_urgent</div>
                <div class="code-name">#icon_alert_urgent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_notification_off"></use>
                </svg>
                <div class="name">notification_off</div>
                <div class="code-name">#icon_notification_off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mail_send"></use>
                </svg>
                <div class="name">mail_send</div>
                <div class="code-name">#icon_mail_send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_clipboard_bullet_list"></use>
                </svg>
                <div class="name">clipboard_bullet_list</div>
                <div class="code-name">#icon_clipboard_bullet_list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_data_bar_fill"></use>
                </svg>
                <div class="name">data_bar_fill</div>
                <div class="code-name">#icon_data_bar_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_data_line_fill"></use>
                </svg>
                <div class="name">data_line_fill</div>
                <div class="code-name">#icon_data_line_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_caret_right"></use>
                </svg>
                <div class="name">caret_right</div>
                <div class="code-name">#icon_caret_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_caret_down"></use>
                </svg>
                <div class="name">caret_down</div>
                <div class="code-name">#icon_caret_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_rename"></use>
                </svg>
                <div class="name">rename</div>
                <div class="code-name">#icon_rename</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mail_all_off"></use>
                </svg>
                <div class="name">mail_all_off</div>
                <div class="code-name">#icon_mail_all_off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mail_all"></use>
                </svg>
                <div class="name">mail_all</div>
                <div class="code-name">#icon_mail_all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_ticket_list_dimiss"></use>
                </svg>
                <div class="name">ticket_list_dimiss</div>
                <div class="code-name">#icon_ticket_list_dimiss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_doc_pdf"></use>
                </svg>
                <div class="name">doc_pdf</div>
                <div class="code-name">#icon_doc_pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_doc_excel"></use>
                </svg>
                <div class="name">doc_excel</div>
                <div class="code-name">#icon_doc_excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_doc_csv"></use>
                </svg>
                <div class="name">doc_csv</div>
                <div class="code-name">#icon_doc_csv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_a-DocumentPDF"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#icon_a-DocumentPDF</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_kpi"></use>
                </svg>
                <div class="name">kpi</div>
                <div class="code-name">#icon_kpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_benchamark"></use>
                </svg>
                <div class="name">benchamark</div>
                <div class="code-name">#icon_benchamark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_kpi_setting"></use>
                </svg>
                <div class="name">kpi_setting</div>
                <div class="code-name">#icon_kpi_setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_alert_filled"></use>
                </svg>
                <div class="name">alert_filled</div>
                <div class="code-name">#icon_alert_filled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lock_close"></use>
                </svg>
                <div class="name">lock_close</div>
                <div class="code-name">#icon_lock_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lock_open"></use>
                </svg>
                <div class="name">lock_open</div>
                <div class="code-name">#icon_lock_open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_people_add"></use>
                </svg>
                <div class="name">people_add</div>
                <div class="code-name">#icon_people_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_target"></use>
                </svg>
                <div class="name">target</div>
                <div class="code-name">#icon_target</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_person_arrow_left"></use>
                </svg>
                <div class="name">person_arrow_left</div>
                <div class="code-name">#icon_person_arrow_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_people_team_delete"></use>
                </svg>
                <div class="name">people_team_delete</div>
                <div class="code-name">#icon_people_team_delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_people_settings"></use>
                </svg>
                <div class="name">people_settings</div>
                <div class="code-name">#icon_people_settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon_delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_receipt_search"></use>
                </svg>
                <div class="name">receipt_search</div>
                <div class="code-name">#icon_receipt_search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_color"></use>
                </svg>
                <div class="name">color</div>
                <div class="code-name">#icon_color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_message_alt_check"></use>
                </svg>
                <div class="name">message_alt_check</div>
                <div class="code-name">#icon_message_alt_check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_message_alt_x"></use>
                </svg>
                <div class="name">message_alt_x</div>
                <div class="code-name">#icon_message_alt_x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_key"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#icon_key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_message-alt-error"></use>
                </svg>
                <div class="name">message_alt_error</div>
                <div class="code-name">#icon_message-alt-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_column_triple"></use>
                </svg>
                <div class="name">column_triple</div>
                <div class="code-name">#icon_column_triple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_save_edit"></use>
                </svg>
                <div class="name">save_edit</div>
                <div class="code-name">#icon_save_edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_top"></use>
                </svg>
                <div class="name">align_top</div>
                <div class="code-name">#icon_align_top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_bottom"></use>
                </svg>
                <div class="name">align_bottom</div>
                <div class="code-name">#icon_align_bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_horizontal_center"></use>
                </svg>
                <div class="name">align_horizontal_center</div>
                <div class="code-name">#icon_align_horizontal_center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_right"></use>
                </svg>
                <div class="name">arrow_right</div>
                <div class="code-name">#icon_arrow_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_left"></use>
                </svg>
                <div class="name">align_left</div>
                <div class="code-name">#icon_align_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_right"></use>
                </svg>
                <div class="name">align_right</div>
                <div class="code-name">#icon_align_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_align_vertical_center"></use>
                </svg>
                <div class="name">align_vertical_center</div>
                <div class="code-name">#icon_align_vertical_center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_cart_alt"></use>
                </svg>
                <div class="name">cart_alt</div>
                <div class="code-name">#icon_cart_alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_undo"></use>
                </svg>
                <div class="name">undo</div>
                <div class="code-name">#icon_undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon_download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_x"></use>
                </svg>
                <div class="name">x</div>
                <div class="code-name">#icon_x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_user_plus"></use>
                </svg>
                <div class="name">user_plus</div>
                <div class="code-name">#icon_user_plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_home_add"></use>
                </svg>
                <div class="name">home_add</div>
                <div class="code-name">#icon_home_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon_like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_volume_full"></use>
                </svg>
                <div class="name">volume_full</div>
                <div class="code-name">#icon_volume_full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_globe"></use>
                </svg>
                <div class="name">globe</div>
                <div class="code-name">#icon_globe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_fullscreen"></use>
                </svg>
                <div class="name">fullscreen</div>
                <div class="code-name">#icon_fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_slideshow"></use>
                </svg>
                <div class="name">slideshow</div>
                <div class="code-name">#icon_slideshow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_stop_circle"></use>
                </svg>
                <div class="name">stop_circle</div>
                <div class="code-name">#icon_stop_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_play_circle"></use>
                </svg>
                <div class="name">play_circle</div>
                <div class="code-name">#icon_play_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_window_close"></use>
                </svg>
                <div class="name">window_close</div>
                <div class="code-name">#icon_window_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_window"></use>
                </svg>
                <div class="name">window</div>
                <div class="code-name">#icon_window</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_windows"></use>
                </svg>
                <div class="name">windows</div>
                <div class="code-name">#icon_windows</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_window_open"></use>
                </svg>
                <div class="name">window_open</div>
                <div class="code-name">#icon_window_open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_building"></use>
                </svg>
                <div class="name">building</div>
                <div class="code-name">#icon_building</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_heart_regular"></use>
                </svg>
                <div class="name">heart_regular</div>
                <div class="code-name">#icon_heart_regular</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_heart_solid"></use>
                </svg>
                <div class="name">heart_solid</div>
                <div class="code-name">#icon_heart_solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_upload"></use>
                </svg>
                <div class="name">arrow_upload</div>
                <div class="code-name">#icon_arrow_upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chart"></use>
                </svg>
                <div class="name">chart</div>
                <div class="code-name">#icon_chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_clockwise"></use>
                </svg>
                <div class="name">arrow_clockwise</div>
                <div class="code-name">#icon_arrow_clockwise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_copy_link"></use>
                </svg>
                <div class="name">copy_link</div>
                <div class="code-name">#icon_copy_link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_logo_bots"></use>
                </svg>
                <div class="name">logo_bots</div>
                <div class="code-name">#icon_logo_bots</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#icon_settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_rotate_counterclockwise"></use>
                </svg>
                <div class="name">arrow_rotate_counterclockwise</div>
                <div class="code-name">#icon_arrow_rotate_counterclockwise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_color_fill"></use>
                </svg>
                <div class="name">color_fill</div>
                <div class="code-name">#icon_color_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon_link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_expand_vertical"></use>
                </svg>
                <div class="name">chevron_expand_vertical</div>
                <div class="code-name">#icon_chevron_expand_vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_collapse_vertical"></use>
                </svg>
                <div class="name">chevron_collapse_vertical</div>
                <div class="code-name">#icon_chevron_collapse_vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevrons_down"></use>
                </svg>
                <div class="name">chevrons_down</div>
                <div class="code-name">#icon_chevrons_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevrons_up"></use>
                </svg>
                <div class="name">chevrons_up</div>
                <div class="code-name">#icon_chevrons_up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_refresh_to"></use>
                </svg>
                <div class="name">arrow_refresh_to</div>
                <div class="code-name">#icon_arrow_refresh_to</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_briefcase"></use>
                </svg>
                <div class="name">briefcase</div>
                <div class="code-name">#icon_briefcase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_notepad"></use>
                </svg>
                <div class="name">notepad</div>
                <div class="code-name">#icon_notepad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_goal"></use>
                </svg>
                <div class="name">goal</div>
                <div class="code-name">#icon_goal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_generate"></use>
                </svg>
                <div class="name">arrow_generate</div>
                <div class="code-name">#icon_arrow_generate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevrons_right"></use>
                </svg>
                <div class="name">chevrons_right</div>
                <div class="code-name">#icon_chevrons_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_no"></use>
                </svg>
                <div class="name">no</div>
                <div class="code-name">#icon_no</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_yes"></use>
                </svg>
                <div class="name">yes</div>
                <div class="code-name">#icon_yes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_right_arrow_alt"></use>
                </svg>
                <div class="name">right_arrow_alt</div>
                <div class="code-name">#icon_right_arrow_alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_comment_warning"></use>
                </svg>
                <div class="name">comment_warning</div>
                <div class="code-name">#icon_comment_warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_comment_error"></use>
                </svg>
                <div class="name">comment_error</div>
                <div class="code-name">#icon_comment_error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_comment_check"></use>
                </svg>
                <div class="name">comment_check</div>
                <div class="code-name">#icon_comment_check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_beaker"></use>
                </svg>
                <div class="name">beaker</div>
                <div class="code-name">#icon_beaker</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_pause"></use>
                </svg>
                <div class="name">pause</div>
                <div class="code-name">#icon_pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_api"></use>
                </svg>
                <div class="name">api</div>
                <div class="code-name">#icon_api</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon_play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_dataset_add_layer"></use>
                </svg>
                <div class="name">dataset_add_layer</div>
                <div class="code-name">#icon_dataset_add_layer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_counterclockwise"></use>
                </svg>
                <div class="name">arrow_counterclockwise</div>
                <div class="code-name">#icon_arrow_counterclockwise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_left"></use>
                </svg>
                <div class="name">arrow_left</div>
                <div class="code-name">#icon_arrow_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_power"></use>
                </svg>
                <div class="name">power</div>
                <div class="code-name">#icon_power</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#icon_save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_error_circle"></use>
                </svg>
                <div class="name">error_circle</div>
                <div class="code-name">#icon_error_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_comment_add"></use>
                </svg>
                <div class="name">comment_add</div>
                <div class="code-name">#icon_comment_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_erase"></use>
                </svg>
                <div class="name">erase</div>
                <div class="code-name">#icon_erase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add_block"></use>
                </svg>
                <div class="name">add_block</div>
                <div class="code-name">#icon_add_block</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_help_circle"></use>
                </svg>
                <div class="name">help_circle</div>
                <div class="code-name">#icon_help_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add_branch_block"></use>
                </svg>
                <div class="name">add_branch_block</div>
                <div class="code-name">#icon_add_branch_block</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_push"></use>
                </svg>
                <div class="name">push</div>
                <div class="code-name">#icon_push</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_linked_bots"></use>
                </svg>
                <div class="name">linked_bots</div>
                <div class="code-name">#icon_linked_bots</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_linked_widgets"></use>
                </svg>
                <div class="name">linked_widgets</div>
                <div class="code-name">#icon_linked_widgets</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_filter_inspector"></use>
                </svg>
                <div class="name">filter_inspector</div>
                <div class="code-name">#icon_filter_inspector</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_copy1"></use>
                </svg>
                <div class="name">copy1</div>
                <div class="code-name">#icon_copy1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_download"></use>
                </svg>
                <div class="name">arrow_download</div>
                <div class="code-name">#icon_arrow_download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_descending"></use>
                </svg>
                <div class="name">arrow_descending</div>
                <div class="code-name">#icon_arrow_descending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_ascending"></use>
                </svg>
                <div class="name">arrow_ascending</div>
                <div class="code-name">#icon_arrow_ascending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_raw_data"></use>
                </svg>
                <div class="name">raw_data</div>
                <div class="code-name">#icon_raw_data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_parse_filter"></use>
                </svg>
                <div class="name">parse_filter</div>
                <div class="code-name">#icon_parse_filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_watch_list"></use>
                </svg>
                <div class="name">watch_list</div>
                <div class="code-name">#icon_watch_list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_checkbox_unchecked"></use>
                </svg>
                <div class="name">checkbox_unchecked</div>
                <div class="code-name">#icon_checkbox_unchecked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_checkbox_checked_square"></use>
                </svg>
                <div class="name">checkbox_checked_square</div>
                <div class="code-name">#icon_checkbox_checked_square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_sync"></use>
                </svg>
                <div class="name">arrow_sync</div>
                <div class="code-name">#icon_arrow_sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add_square"></use>
                </svg>
                <div class="name">add_square</div>
                <div class="code-name">#icon_add_square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_info_circle_fill"></use>
                </svg>
                <div class="name">info_circle_fill</div>
                <div class="code-name">#icon_info_circle_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_condition_format"></use>
                </svg>
                <div class="name">condition _format</div>
                <div class="code-name">#icon_condition_format</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_lift"></use>
                </svg>
                <div class="name">chevron_lift</div>
                <div class="code-name">#icon_chevron_lift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_up"></use>
                </svg>
                <div class="name">chevron_up</div>
                <div class="code-name">#icon_chevron_up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_right"></use>
                </svg>
                <div class="name">chevron_right</div>
                <div class="code-name">#icon_chevron_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_chevron_down"></use>
                </svg>
                <div class="name">chevron_down</div>
                <div class="code-name">#icon_chevron_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_down"></use>
                </svg>
                <div class="name">arrow_down</div>
                <div class="code-name">#icon_arrow_down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_table"></use>
                </svg>
                <div class="name">table</div>
                <div class="code-name">#icon_table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_navigation"></use>
                </svg>
                <div class="name">navigation</div>
                <div class="code-name">#icon_navigation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_data"></use>
                </svg>
                <div class="name">data</div>
                <div class="code-name">#icon_data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_checkmark"></use>
                </svg>
                <div class="name">checkmark</div>
                <div class="code-name">#icon_checkmark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_up"></use>
                </svg>
                <div class="name">arrow_up</div>
                <div class="code-name">#icon_arrow_up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_sort"></use>
                </svg>
                <div class="name">arrow_sort</div>
                <div class="code-name">#icon_arrow_sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_fold"></use>
                </svg>
                <div class="name">arrow_fold</div>
                <div class="code-name">#icon_arrow_fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon_list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_dismiss"></use>
                </svg>
                <div class="name">dismiss</div>
                <div class="code-name">#icon_dismiss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_unfold"></use>
                </svg>
                <div class="name">arrow_unfold</div>
                <div class="code-name">#icon_arrow_unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon_share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_book_formula_information"></use>
                </svg>
                <div class="name">book_formula_information</div>
                <div class="code-name">#icon_book_formula_information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_approve"></use>
                </svg>
                <div class="name">approve</div>
                <div class="code-name">#icon_approve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_adjust_time"></use>
                </svg>
                <div class="name">adjust_time</div>
                <div class="code-name">#icon_adjust_time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_field_formula"></use>
                </svg>
                <div class="name">field_formula</div>
                <div class="code-name">#icon_field_formula</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_field_format"></use>
                </svg>
                <div class="name">field_format</div>
                <div class="code-name">#icon_field_format</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_schedule_unify"></use>
                </svg>
                <div class="name">schedule_unify</div>
                <div class="code-name">#icon_schedule_unify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#icon_flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_checkmark_circle"></use>
                </svg>
                <div class="name">checkmark_circle</div>
                <div class="code-name">#icon_checkmark_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_block"></use>
                </svg>
                <div class="name">block</div>
                <div class="code-name">#icon_block</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_alert"></use>
                </svg>
                <div class="name">alert</div>
                <div class="code-name">#icon_alert</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_comment_forum"></use>
                </svg>
                <div class="name">comment_forum</div>
                <div class="code-name">#icon_comment_forum</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_large"></use>
                </svg>
                <div class="name">large</div>
                <div class="code-name">#icon_large</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#icon_people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_library"></use>
                </svg>
                <div class="name">library</div>
                <div class="code-name">#icon_library</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_person"></use>
                </svg>
                <div class="name">person</div>
                <div class="code-name">#icon_person</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_city"></use>
                </svg>
                <div class="name">city</div>
                <div class="code-name">#icon_city</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_small"></use>
                </svg>
                <div class="name">small</div>
                <div class="code-name">#icon_small</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_dashboard_zoom"></use>
                </svg>
                <div class="name">dashboard_zoom</div>
                <div class="code-name">#icon_dashboard_zoom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon_clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_drag"></use>
                </svg>
                <div class="name">drag</div>
                <div class="code-name">#icon_drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon_more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_suggestion"></use>
                </svg>
                <div class="name">suggestion</div>
                <div class="code-name">#icon_suggestion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_book_formula_logical"></use>
                </svg>
                <div class="name">book_formula_logical</div>
                <div class="code-name">#icon_book_formula_logical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_datetime_type"></use>
                </svg>
                <div class="name">datetime_type</div>
                <div class="code-name">#icon_datetime_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_slicer"></use>
                </svg>
                <div class="name">slicer</div>
                <div class="code-name">#icon_slicer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_design"></use>
                </svg>
                <div class="name">design</div>
                <div class="code-name">#icon_design</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_data_manage"></use>
                </svg>
                <div class="name">data_manage</div>
                <div class="code-name">#icon_data_manage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_dismiss_circle_o"></use>
                </svg>
                <div class="name">dismiss_circle_o</div>
                <div class="code-name">#icon_dismiss_circle_o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_data_inspactor"></use>
                </svg>
                <div class="name">data_inspactor</div>
                <div class="code-name">#icon_data_inspactor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add_circle"></use>
                </svg>
                <div class="name">add_circle</div>
                <div class="code-name">#icon_add_circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_right_outer_join"></use>
                </svg>
                <div class="name">right_outer_join</div>
                <div class="code-name">#icon_right_outer_join</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_lift_outer_join"></use>
                </svg>
                <div class="name">lift_outer_join</div>
                <div class="code-name">#icon_lift_outer_join</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_inner_join"></use>
                </svg>
                <div class="name">inner_join</div>
                <div class="code-name">#icon_inner_join</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mail_all_accounts"></use>
                </svg>
                <div class="name">mail_all_accounts</div>
                <div class="code-name">#icon_mail_all_accounts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_insert_token"></use>
                </svg>
                <div class="name">insert_token</div>
                <div class="code-name">#icon_insert_token</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_mail_add"></use>
                </svg>
                <div class="name">mail_add</div>
                <div class="code-name">#icon_mail_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_calculator"></use>
                </svg>
                <div class="name">calculator</div>
                <div class="code-name">#icon_calculator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_summrize_by"></use>
                </svg>
                <div class="name">summrize_by</div>
                <div class="code-name">#icon_summrize_by</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_board"></use>
                </svg>
                <div class="name">board</div>
                <div class="code-name">#icon_board</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_settings_dev"></use>
                </svg>
                <div class="name">settings_dev</div>
                <div class="code-name">#icon_settings_dev</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon_edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon_add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_date_type"></use>
                </svg>
                <div class="name">date_type</div>
                <div class="code-name">#icon_date_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_user_type"></use>
                </svg>
                <div class="name">user_type</div>
                <div class="code-name">#icon_user_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_amount_type"></use>
                </svg>
                <div class="name">amount_type</div>
                <div class="code-name">#icon_amount_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_link_type"></use>
                </svg>
                <div class="name">link_type</div>
                <div class="code-name">#icon_link_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_arrow_curve_left"></use>
                </svg>
                <div class="name">arrow_curve_left</div>
                <div class="code-name">#icon_arrow_curve_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon_search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_text_type"></use>
                </svg>
                <div class="name">text_type</div>
                <div class="code-name">#icon_text_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_bool_type"></use>
                </svg>
                <div class="name">bool_type</div>
                <div class="code-name">#icon_bool_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_null_type"></use>
                </svg>
                <div class="name">null_type</div>
                <div class="code-name">#icon_null_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_number_type"></use>
                </svg>
                <div class="name">number_type</div>
                <div class="code-name">#icon_number_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#icon_filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_eye_show"></use>
                </svg>
                <div class="name">eye_show</div>
                <div class="code-name">#icon_eye_show</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_eye_hide"></use>
                </svg>
                <div class="name">eye_hide</div>
                <div class="code-name">#icon_eye_hide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon_copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_cw"></use>
                </svg>
                <div class="name">cw</div>
                <div class="code-name">#icon_cw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#icon_history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_dataset"></use>
                </svg>
                <div class="name">dataset</div>
                <div class="code-name">#icon_dataset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon_info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_config"></use>
                </svg>
                <div class="name">config</div>
                <div class="code-name">#icon_config</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon_visualization"></use>
                </svg>
                <div class="name">visualization</div>
                <div class="code-name">#icon_visualization</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
